//默认提供变量组织
var img = "/JSdemo/CanvasDemo/public/img/baterry.png";
var Xaxis = 860;
var Yaxis = 380;

/*配置方向文字东的绘制参数*/
var Xtaxis = 950;
var Ytaxis = 250;
var name  = "东";
var font  = "20px Arial";
var xpos  = 'right';
var ypos  = "middle";
var color = "#f4df62";

//获取前端DOM canvas #CMap
var cmap = document.getElementById("CMap");

//创建context画布对象
var ctx = cmap.getContext("2d");


$(function () {
	//开始调用绘制矩形场地方法
	drawRectSite(ctx);
	
	//绘制方向文字
	drawText(ctx,Xtaxis,Ytaxis,name,font,xpos,ypos,color);
	
	//调用绘制巡检任务点方法
	drawMapPoint(ctx,Xaxis,Yaxis,img);
});

//绘制矩形场地方法
function drawRectSite(ctx){
	/*以下部分是绘制地图场地及场地边框*/
	//绘制矩形场地填充部分
	ctx.fillStyle = "#414d52";
	ctx.fillRect(20,20,940,460);
	
	//设置矩形边框颜色和边框粗度并绘制
	ctx.strokeStyle = "#67ab46";	
	ctx.lineWidth = 40;                //设置边框线框
	ctx.strokeRect(0, 0, 980, 500);    //加粗边框矩形

	/*以下部分是绘制地图上的东南西北方向文字*/
	//绘制北方向文字
	ctx.font = "20px Arial";
	ctx.textAlign = 'center';
	ctx.textBaseline = "top";
	ctx.fillStyle = "#f4df62";
	ctx.fillText("北",470,30);
	
	//绘制南方向文字
	ctx.font = "20px Arial";
	ctx.textAlign = 'center';
	ctx.textBaseline = "bottom";
	ctx.fillStyle = "#f4df62";
	ctx.fillText("南",470,470);
	
	//绘制西方向文字
	ctx.font = "20px Arial";
	ctx.textAlign = 'left';
	ctx.textBaseline = "middle";
	ctx.fillStyle = "#f4df62";
	ctx.fillText("西",30,250);
	

}

function drawText(ctx,Xaxis,Yaxis,name,font,xpos,ypos,color){
	//绘制文字标示
	ctx.font = font;
	ctx.textAlign = xpos;
	ctx.textBaseline = ypos;
	ctx.fillStyle = color;
	ctx.fillText(name,Xaxis,Yaxis);
}

/*以下部分是绘制地图上的设备巡检区域任务点*/
function drawMapPoint(ctx,Xaxis,Yaxis,img){
	//ctx.beginPath(;    //开启绘制路径
	//ctx.closePath();   //关闭绘制路径
	
	//声明图像绘制对象
	var imgObj = new Image();
	
	//获取参数传递过来的图片
	imgObj.src =  img;
	// console.log(Xaxis);
	// console.log(Yaxis);
	
	//图片加载完之后,再开始绘制
	imgObj.onload = function(){
		//绘制图片
		console.log("图片加载成功");
		ctx.drawImage(imgObj,Xaxis,Yaxis,40,40);
		console.log(this);
		console.log("图片绘制完毕");
	}
}